<template>
  <div class="post-blog-container">
    <h1>发布博客</h1>
    <form @submit.prevent="submitPost" class="post-form">
      <div class="form-group">
        <label for="title">标题:</label>
        <input 
          id="title" 
          v-model="blogPost.title" 
          type="text" 
          required 
          placeholder="请输入博客标题"
        />
      </div>

      <div class="form-group">
        <label for="author">作者:</label>
        <input 
          id="author" 
          v-model="blogPost.author" 
          type="text" 
          required 
          placeholder="请输入作者姓名"
        />
      </div>

      <div class="form-group">
        <label for="content">内容:</label>
        <textarea 
          id="content" 
          v-model="blogPost.content" 
          rows="10" 
          required 
          placeholder="请输入博客内容"
        ></textarea>
      </div>

      <div class="form-group">
        <label for="category">分类:</label>
        <select id="category" v-model="blogPost.category">
          <option value="技术">技术</option>
          <option value="生活">生活</option>
          <option value="旅行">旅行</option>
          <option value="其他">其他</option>
        </select>
      </div>

      <div class="button-group">
        <button type="submit" :disabled="isSubmitting">
          {{ isSubmitting ? '发布中...' : '发布博客' }}
        </button>
        <button type="button" @click="resetForm" :disabled="isSubmitting">
          重置
        </button>
      </div>
    </form>

    <div v-if="successMessage" class="success-message">
      {{ successMessage }}
    </div>

    <div v-if="errorMessage" class="error-message">
      {{ errorMessage }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'

// 定义博客文章的数据结构
interface BlogPost {
  title: string
  author: string
  content: string
  category: string
}

// 使用 reactive 创建响应式表单数据
const blogPost = reactive<BlogPost>({
  title: '',
  author: '',
  content: '',
  category: '技术'
})

// 状态管理
const isSubmitting = ref(false)
const successMessage = ref('')
const errorMessage = ref('')
const router = useRouter()

// 提交博客文章
const submitPost = async () => {
  // 重置消息
  successMessage.value = ''
  errorMessage.value = ''

  // 设置提交状态
  isSubmitting.value = true

  try {
    // 这里应该调用实际的API来发布博客
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 模拟成功响应
    successMessage.value = '博客发布成功!'
    
    // 2秒后重置表单
    setTimeout(() => {
      resetForm()
    }, 2000)
  } catch (error) {
    // 处理错误
    errorMessage.value = '发布失败，请重试'
    console.error('发布博客时出错:', error)
  } finally {
    isSubmitting.value = false
  }
}

// 重置表单
const resetForm = () => {
  blogPost.title = ''
  blogPost.author = ''
  blogPost.content = ''
  blogPost.category = '技术'
  successMessage.value = ''
  errorMessage.value = ''
}
</script>

<style scoped>
.post-blog-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
}

.post-form {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #555;
}

input,
textarea,
select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box;
}

textarea {
  resize: vertical;
}

.button-group {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 30px;
}

button {
  padding: 12px 30px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

button:hover:not(:disabled) {
  background-color: #0056b3;
}

button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.success-message {
  margin-top: 20px;
  padding: 10px;
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
  border-radius: 4px;
  text-align: center;
}

.error-message {
  margin-top: 20px;
  padding: 10px;
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
  text-align: center;
}
</style>